<template>
	<div
		class=""
		style=""
	>
		<div class="bgLogo">
			<div
				class="selectAir"
				style="width: 510px; height: 420px"
			>
				<div style="padding-top: 60px;">
					<el-form
						label-position="top"
						:inline="true"
						class="demo-form-inline aircraftInfo"
						ref="form"
						:model="aircraftInfo"
						label-h=""
					>
						<el-form-item label="出发城市">
							<el-input
								size="mini"
								v-model="aircraftInfo.startCity"
							>
								<i
									slot="suffix"
									class="el-input__icon el-icon-location-outline"
									style="font-size: 17px; line-height: 0"
								></i>
							</el-input>
						</el-form-item>

						<el-form-item>
							<span
								class="changecity"
								@click="changecity"
							></span>
						</el-form-item>

						<el-form-item label="到达城市">
							<el-input
								size="mini"
								v-model="aircraftInfo.reachCity"
							>
								<i
									slot="suffix"
									class="el-input__icon el-icon-location-outline"
									style="font-size: 17px; line-height: 0"
								></i>
							</el-input>
						</el-form-item>

						<el-form-item label="出发日期">
							<el-date-picker
								v-model="aircraftInfo.startTime"
								type="date"
								value-format="yyyy-MM-dd"
								placeholder="选择日期"
								size="mini"
							>
							</el-date-picker>
						</el-form-item>
						<el-form-item label="返程日期">
							<el-date-picker
								v-model="aircraftInfo.reachTime"
								type="date"
								value-format="yyyy-MM-dd"
								placeholder="选择日期"
								size="mini"
								:disabled="isdc"
							>
							</el-date-picker>
						</el-form-item>

						<el-button
							type="success"
							plain
							icon="el-icon-search"
							style="margin-left: 39%"
							@click="search"
						>搜索
						</el-button>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isdc: false,
				aircraftInfo: {},
			};
		},
		methods: {
			search() {
				this.$router.push({
					path: "/starttobuy"
					, query: {
						startCity: this.aircraftInfo.startCity,
						reachCity: this.aircraftInfo.reachCity,
						startTime: this.aircraftInfo.startTime,
						reachTime: this.aircraftInfo.reachTime
					}
				});
			},
			changecity() {
				let tmp = this.aircraftInfo.startCity;
				this.aircraftInfo.startCity = this.aircraftInfo.reachCity;
				this.aircraftInfo.reachCity = tmp;
			}
		}
	};
</script>

<style scoped>
	.bg-purple {
		background: #f9fafc;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
	.bgLogo {
		background: url("../assets/air_images/20200917.png") no-repeat;
		width: 100%;
		height: 550px;
		padding-top: 28px;
	}
	.selectAir {
		height: 200px;
		margin: 0px auto;
		background-color: white;
		border-radius: 10px;
	}
	.aircraftInfo {
		margin-top: 10px;
		margin-left: 11px;
		position: relative;
	}
	/deep/ .el-form-item__label {
		line-height: 0px !important;
	}
	/deep/ .el-form--label-top .el-form-item__label {
		padding: 0;
	}
	.changecity {
		margin-top: 25px;
		display: inline-block;
		background: url("../assets/air_images/map.png") no-repeat;
		width: 28px;
		height: 32px;
		background-position: -92px -61px;
	}
</style>
